import React, {useState,useContext,useEffect} from "react";
import { AppContext } from "../../../../reHook/start";
import "./index.less"
import { base } from 'nc-lightapp-front';
const {NCInput,NCSelect,NCRadio} = base
const NCOption = NCSelect.NCOption;
export function SInput (props) {
    let width = props.width || '200px'
    return (
        <div className="input" style={{width:`${width}`}}>
           <span>{props.name}</span><NCInput
                        disabled={props.disabled}
                        maxLength={20}
                        value={props.value}
                        placeholder={props.name}
                        onChange={props.onChange}
                />
        </div>
    )
}
export function SCheckbox (props) {
    const {ab,dispatch} = useContext(AppContext)
    const [Sdisable ,setSdisable] = useState(false)
    useEffect(()=>{
        console.log(ab.allValue.checked)
        if(ab.allValue.checked !== 'numcheck'){
            setSdisable(true)
        }else{
            setSdisable(false)
        }
    },[ab.allValue.checked])
    useEffect(()=>{
        let item = props.option.find((value,index,arr)=>{
            return value.display === ab.allValue.checkselect
        })
        if(item){
            dispatch({
                type:'ab/update',
                payload:{
                    checkSelectRealValue: item.value
                }
            })
        }
        
    },[ab.allValue.checkselect])
    return (
        <div className="checkbox">
        <NCRadio.NCRadioGroup
            name="position"
            selectedValue={props.selectedValue}
            onChange={props.onChange}>

        <NCRadio className = "myridio" disabled={props.disabled} value={'allcheck'} >{'全部选择'}</NCRadio>

        <NCRadio className = "myridio" disabled={props.disabled} value={'numcheck'} >{'序号定位'}</NCRadio>
      </NCRadio.NCRadioGroup>
      <div className = "additem">
        <NCSelect
                    defaultValue={props.value}
                    disabled={Sdisable}
                    style={{ width: 200, marginRight: 6 }}
                    onChange={props.selectChange}
                >
                    {
                        props.option.map((item,index)=>{
                            return <NCOption value={item.display}>{item.display}</NCOption>
                        })
                    }
        </NCSelect>

        <NCInput
            disabled={Sdisable}
            className = {'detailControl'} 
            type={'number'}
            value={props.checkDetail}
            onChange={props.ControlChange}
            onKeyDown = {props.ControlChange}
        />条
      </div>
      
     </div>
    )
}
export function SSelect (props) {

    return (
        
        <div className="select">
           <span>{props.name}</span>
           <NCSelect
                    disabled = {props.disabled}
                    defaultValue={props.value}
                    style={{ width: 200, marginRight: 6 }}
                    onChange={props.onChange}
                >
                    {
                        props.option.map((item,index)=>{
                           return <NCOption value={item.value}>{item.display}</NCOption>
                        })
                    }
            </NCSelect>

        </div>
    )
}